<!DOCTYPE html>
<html>
  <head>
    <style>
      div { position: absolute; top: 0; left: 0; width: 100px; height: 100px; }
      div.offset { left: 100px; }
      div.offset2 { left: 200px; }
    </style>
  </head>
  <body>
    <!-- Make sure the difference of the two z-index values overflows a 32-bit
    signed int.  So set the positive one to 2^30 + 1 and the negative one to
    -(2^30 + 1).  Then the difference is 2^31 + 2 which is negative when
    treated as a 32-bit signed int.  -->
    <div style="background: green; z-index: 1073741825"></div>
    <div style="background: red; z-index: -1073741825"></div>
    <!-- Test clamping on the high end by setting the high z-index to
         2^32 + 1  -->
    <div class="offset" style="background: green; z-index: 4294967297"></div>
    <div class="offset" style="background: red; z-index: 2"></div>
    <!-- Test clamping on the low end by setting the low z-index to
         -(2^32 + 1)  -->
    <div class="offset2" style="background: green; z-index: -2"></div>
    <div class="offset2" style="background: red; z-index: -4294967297"></div>
  </body>
</html>
